<template>
    <div class="addProduct3">
        <step-add :active='2'></step-add>
        <div>
            <van-cell-group style="text-align:left">
                <van-cell is-link title="检验类别" :value="test" @click="showClassClick"/>
                <van-popup v-model="showClass" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择检验类别' 
                        :columns="columns"
                        show-toolbar
                        @cancel="onCancel4C"
                        @confirm="onConfirm4C"
                     />
                </van-popup>

                <van-cell is-link title="报告模版" :value="test" @click="showTemClick"/>
                <van-popup v-model="showTem" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择报告模版' 
                        :columns="columns"
                        show-toolbar
                        @cancel="onCancel4T"
                        @confirm="onConfirm4T"
                     />
                </van-popup>
                

                <van-field v-model="test" label="样品数量" />

                <van-cell is-link title="送检方式" :value="test" @click="showSendClick"/>
                <van-popup v-model="showSend" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择送检方式' 
                        :columns="columns"
                        show-toolbar
                        @cancel="onCancel4S"
                        @confirm="onConfirm4S"
                     />
                </van-popup>

                <van-cell is-link title="样品包装描述" :value="test" @click="showDesClick"/>
                <van-popup v-model="showDes" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择样品包装描述' 
                        :columns="columns"
                        show-toolbar
                        @cancel="onCancel4D"
                        @confirm="onConfirm4D"
                     />
                </van-popup>

                <van-cell is-link title="样品状态描述" :value="test" @click="showStateClick"/>
                <van-popup v-model="showState" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择样品包装描述' 
                        :columns="columns"
                        show-toolbar
                        @cancel="onCancel4State"
                        @confirm="onConfirm4State"
                     />
                </van-popup>

                <van-cell is-link title="样品保存条件" :value="test" @click="showSaveClick"/>
                <van-popup v-model="showSave" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择样品包装描述' 
                        :columns="columns"
                        show-toolbar
                        @cancel="onCancel4Save"
                        @confirm="onConfirm4Save"
                     />
                </van-popup>

                <van-field v-model="test" label="合计费用" />
            </van-cell-group>
        </div>
        <div class='step3Footer' >
            <div class='pre' @click="pre">上一步</div>
            <div class='next' @click="next">下一步</div>
        </div>
    </div>
</template>

<script>
import stepAdd from '@/components/stepAdd'
import { 
    Button
    ,DropdownMenu
    , DropdownItem
    ,Icon 
    ,Field
    ,DatetimePicker
    ,Popup
    ,Cell
    ,CellGroup
    ,Picker } from 'vant';
export default {
    name: 'addProduct3',
    components: {
        stepAdd,
        [Icon.name]:Icon,
        [Button.name]:Button,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,
    },
    data () {
        return {
            test:'',
            showClass:false,
            showTem:false,
            showSend:false,
            showDes:false,
            showState:false,
            showSave:false,
            columns: [
                { text: '类别一',id:1},
                { text: '商品二' },
                { text: '商品三' }
            ],
        }
    },
    methods:{
        pre(){
            this.$router.push({path:"/addProduct2"});
        },
        next(){
            this.$router.push({path:"/addProduct4"});
        },

        showClassClick(){
            this.showClass = true
        },
        onCancel4C(){
            this.showClass = false
        },
        onConfirm4C(val){
            this.showClass = false
        },

        showTemClick(){
            this.showTem = true
        },
        onCancel4T(){
            this.showTem = false
        },
        onConfirm4T(val){
            this.showTem = false
        },

        showSendClick(){
            this.showSend = true
        },
        onCancel4S(){
            this.showSend = false
        },
        onConfirm4S(val){
            this.showSend = false
        },

        showDesClick(){
            this.showDes = true
        },
        onCancel4D(){
            this.showDes = false
        },
        onConfirm4D(val){
            this.showDes = false
        },

        showStateClick(){
            this.showState = true
        },
        onCancel4State(){
            this.showState = false
        },
        onConfirm4State(val){
            this.showState = false
        },

        showSaveClick(){
            this.showSave = true
        },
        onCancel4Save(){
            this.showSave = false
        },
        onConfirm4Save(val){
            this.showSave = false
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.step3Footer{
    width:100%;
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    left:0;
    color: white;
    display: flex
}
.pre{
    background: #07c160;
    width: 50%;
}
.next{
    background:  #1989fa;
    width: 50%;
}
</style>
